<template>
    <div style="width: 98%;height: auto;margin:15px auto">
        <div class="row">
            <div class="col-md-3 col-nav bg-light">
                <div class="nav flex-column nav-pills nav-div" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <router-link to="/home" class=" nav-link active" id="welcome-sidebar" data-toggle="pill" role="tab" aria-controls="v-pills-home" aria-selected="true">主页</router-link>
                    <router-link to="/cost" class=" nav-link" id="cost-sidebar" data-toggle="pill" role="tab" aria-controls="v-pills-profile" aria-selected="false">支出管理</router-link>
                    <router-link to="/income" class=" nav-link" id="income-sidebar" data-toggle="pill" role="tab" aria-controls="v-pills-messages" aria-selected="false">收入管理</router-link>
                    <router-link to="/graph" class=" nav-link" id="graph-sidebar" data-toggle="pill" role="tab" aria-controls="v-pills-settings" aria-selected="false">图形显示</router-link>
                    <router-link to="/post" class=" nav-link" id="post-sidebar" data-toggle="pill" role="tab" aria-controls="v-pills-settings" aria-selected="false">记事本</router-link>
                </div>

            </div>
            <div class="col-md-9 col-sm-12">
                <div class="tab-content" id="v-pills-tabContent">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import TheHeader from "../components/The-Header";
    export default {
        components:{TheHeader},
        name: "Index",
        mounted() {
            let _this = this;
            $('body').attr('class', 'no-skin');
            let routeName = _this.$route.name;
            _this.activeSidebar(routeName.substring(0,routeName.indexOf('/') === -1 ? routeName.length : routeName.indexOf('/')) + "-sidebar");

            if(routeName.endsWith('index')){
                _this.$router.push("/home");
            }
        },
        watch: {
            $route: {
                handler:function (val,oldVal) {
                    let _this = this;
                    let routeName = _this.$route.name;
                    _this.$nextTick(function () {
                        _this.activeSidebar(routeName.substring(0,routeName.indexOf('/') === -1 ? routeName.length : routeName.indexOf('/')) + "-sidebar");
                    })
                }
            }
        },
        methods: {
            activeSidebar: function (id) {
                $("#"+id).siblings().removeClass("active");
                $("#"+id).addClass("active");
            },
        }
    }
</script>

<style scoped>
    @media screen and (max-width: 1000px) {
        .col-nav{
            display: none;
        }
    }
</style>